<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-28 20:50:17
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-29 19:21:52
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\MixedCutPreview.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
/**
 * 混剪预览
 */
import {
  ref,
  onMounted,
  toRefs,
  computed,
  reactive,
  watch,
  nextTick,
  onUnmounted,
  watchEffect,
} from "vue";
// 加载中组件
import Loding from "./components/Loding.vue";
// 头部组件
import navBack from "../components/navBack.vue";
// 定量选择弹窗
import QuantitativeChoice from "./components/QuantitativeChoice.vue";
// 生成视频弹窗
import saveVideoDialog from "./components/MemberRecharge.vue";
// icon
import {
  VideoCameraAddOutlined,
  CaretRightOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons-vue";
// 路由
import { useRouter, useRoute } from "vue-router";
// 导入工具和模拟数据
import { filterArr } from "../utools/index.js";
// 可编辑头部
import EditableHead from "@/views/shotstack/MuseMixedCut/components/EditableHead.vue";
// 仓库
import store from "@/store";
import awaitDialog from '@/views/shotstack/components/dialogComponent/awaitDialog.vue'

import utils from "@/common/utils/utils.js"
// 预览的手机相关数据
import Vue3DraggableResizable from "vue3-draggable-resizable";
import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";
// 封装的请求
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import MaterialsModule from "@/views/shotstack/components/MaterialsModule/index.vue";
import SaveVideo from "@/views/shotstack/MuseMixedCut/MixedCutPreview/components/SaveVideo.vue";
import { set } from "lodash";
import { onBeforeRouteLeave } from "vue-router";
const route = useRoute();
const router = useRouter();

const state = reactive({
  coverForm: {
    poster_url: "",
  },
});
// 初始化页面
const queryData = ref({
  id: "",
  page: 1,
  pageSize: 25,
  category: [],
  duration: [], // 待优化  点击掉接口
});
// 切换加载中状态
const isLoding = ref(true);
const loadingIng = ref(true);
const loadingIng_spain = ref(true);

const videoElement = ref(null);
const currentVideoUrl = ref('');

// 可编辑标题
const titleText = computed(() => route.query.name + " - 预览");

// 高亮选中的项
const actives = ref([
  {
    name: "视频类型",
    activeList: [3],
  },
  {
    name: "视频时长",
    activeList: [0],
  },
]);


const video_num = ref(0)
// 选择筛选项
const selectFilter = (item, type) => {
  let isIndex;
  type == "视频类型" ? (isIndex = 0) : (isIndex = 1);

  let target = actives.value[isIndex].activeList;

  if (type == "视频时长") {
    // 0代表点击的是'全部'按钮
    if (item.id == 0) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 0);
    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        target.splice(index, 1);
        target.length == 0 && target.push(0);
      } else {
        const zeroIndex = target.findIndex((ele) => ele == 0);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  } else {
    // loadingIng.value = false
    if (item.id == 3) {
      // 那么替换现在所有的高亮选项, 点亮'全部'按钮
      target.splice(0, target.length, 3);

    } else {
      // 判断当前选项是否已经选中
      const index = target.findIndex((ele) => ele == item.id);
      if (index !== -1) {
        // 选中的话 则删除此项, 如果删除之后数组为空 则'全部'按钮点亮
        target.splice(index, 1);
        target.length == 0 && target.push(3);
      } else {
        // 未选中的话 则点亮当前选项, 并且删除'全部'按钮的高亮
        const zeroIndex = target.findIndex((ele) => ele == 3);
        zeroIndex !== -1 && target.splice(zeroIndex, 1);
        target.push(item.id);
      }
    }
  }

  if (type == "视频类型") {
    queryData.value.category = target;
  } else {
    queryData.value.duration = target;
  }

  if (queryData.value.duration[0] == 0) {
    queryData.value.duration = [];
  }
  if (queryData.value.category[0] == 3) {
    queryData.value.category = [];
  }

  showVideoData.value = []
  queryData.value.page = 1
  getAllData();
};

const radioType = computed(() => store.getters.clipJSON?.aspect_ratio);
// 加载效果
const loading = ref(false);
// 动态样式
const resizableStyle = computed(() => {
  return {
    backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(${state.coverForm.poster_url}), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
    backgroundSize: "100% auto",
    backgroundPosition: "center center",
    backgroundRepeat: "no-repeat",
    width: "360px",
    height:
      radioType.value == "1:1"
        ? "360px"
        : radioType.value == "16:9"
          ? "202.5px"
          : "640px",
  };
});

// 预览控制变量
const preview = ref(false);
// 当前预览的项
const previewItem = ref(null);
// 收起预览
const closePreview = () => {
  preview.value = false;
  previewItem.value = null;
};

// 展开预览
const showVideo_R = ref("");
const openPreview = (item) => {
  preview.value = true;
  previewItem.value = item.id;
  showVideo_R.value = item.video_url;
};

// 底部视频卡片全选
const selectAll = () => {
  if (showVideoData.value.every((item) => item.checked)) {
    showVideoData.value.forEach((item) => {
      item.checked = false;
    });
  } else {
    showVideoData.value.forEach((item) => {
      item.checked = true;
    });
  }
};

// 定量选择
const dialog = ref(null); // 弹窗组件实例
const handleSelectVideo = () => {
  dialog.value && dialog.value.showModal();
};

// 定量选择 弹窗点击确定回调
const handleOk = (val) => {
  for (let i = 0; i < val && i < showVideoData.value.length; i++) {
    showVideoData.value[i].checked = true;
  }
};

// 生成视频
const saveData = ref({
  id: "",
  checked_num: "",
  checkedIds: "",
});
const saveVisible = ref(false);

const saveVideo = () => {
  if (checked_num.value > 0) {
    saveData.value.id = route.query.id;
    saveData.value.checked_num = checked_num.value;
    saveData.value.checkedIds = checkedIds.value;
    saveVisible.value = true;
  } else {
    message.warn("请先选择视频!");
  }
};

const timerId = ref(null);
const showVideoData = ref([]);
const maxlength = ref(0);
const video_Data = ref([]);
const video_isdoning = ref(0)
// 初始化页面
const initData = async () => {
  queryData.value.id = route.query.qid;
  isLoding.value = false;


};

// 轮训列表数据
const getAllData = async () => {
  const res = await request.get(
    "/work_ai",
    `/user/shotstack/preview/list`,
    queryData.value
  );

  video_isdoning.value = res.result.total
  video_num.value = res.result.total

  if (res.result.data.length > 0) {
    if (showVideoData.value.length > 0) {
      const existingVideoIds = new Set(
        showVideoData.value.map((video) => video.id)
      );
      const uniqueNewVideos = res.result.data.filter(
        (newVideo) => !existingVideoIds.has(newVideo.id)
      );
      showVideoData.value = [
        ...showVideoData.value,
        ...uniqueNewVideos.map((video) => ({ ...video, checked: false })),
      ];
    } else {
      showVideoData.value = res.result.data.map((video) => (
        {
          ...video,
          checked: false,
        }));
    }
    updateFilterValues(res.result);



    showVideoData.value.forEach((v1) => {
      v1.resources.forEach((v2) => {
        if (v2.type == "video") {
          video_Data.value.push(v2.material_url);
        }
      });

      currentVideoUrl.value = v1.video_url;
      if (videoElement.value) {
        videoElement.value.load();
      }
    });


  }

  if (res.result.all_done == false) {
    // 视频还在生成  继续轮训
    timerId.value = setTimeout(() => {
      getAllData();
      return;
    }, 5000);
  } else {
    loadingIng.value = false;
    loadingIng_spain.value = false
    // 成功了
    maxlength.value = res.result.total;
    isTotalquest.value == false
    updateFilterValues(res.result);
    addTip();
  }
}


const updateFilterValues = (result) => {
  filterArr.value[0].items[0].num =
    result.category_common +
    result.category_repetition_low +
    result.category_repetition_low_extremely;
  filterArr.value[0].items[3].num = result.category_common;
  filterArr.value[0].items[2].num = result.category_repetition_low;
  filterArr.value[0].items[1].num = result.category_repetition_low_extremely;
};
const timerIds = ref(null);
const tipAll = ref([]);
// 获取视频类型 接口
const videoType = async () => {
  const res = await request.get("/work_ai", `/user/shotstack/category`, {
    id: route.query.qid,
  });
  if (res.result.all_done == false) {
    // 视频还在生成  继续轮训
    timerIds.value = setTimeout(() => {
      videoType();
      return;
    }, 5000);
  } else {
    tipAll.value = res.result.list;
    addTip();
  }
};

// 添加标签的方法
const addTip = () => {
  if (showVideoData.value.length > 0) {
    showVideoData.value = showVideoData.value.map((v1) => {
      const match = tipAll.value.find((v2) => v1.id === v2.videoMixCut_id);
      return {
        ...v1,
        category: match ? match.category : null,
      };
    });
  }
};

watchEffect(() => {
  if (tipAll.value.length > 0 && showVideoData.value.length > 0) {
    // 对showVideoData进行更新，将匹配到的category添加进去
    showVideoData.value = showVideoData.value.map((v1) => {
      const match = tipAll.value.find((v2) => v1.id === v2.videoMixCut_id);
      return {
        ...v1,
        category: match ? match.category : v1.category || null, // 保留已有category或设为null
      };
    });
  }
});

// 正在切片 接口
const videoAllnum = ref("");
const timeloading = ref(null);
const istimeloading = ref(true);
const flag = ref(false)

const isTotalquest = ref(true)
const LoadingType = async () => {
  clearTimeout(timeloading.value);
  const res = await request.get("/work_ai", `/user/shotstack/preview/total`, {
    id: route.query.qid,
  });
  if (res && res.total == 0) {
    // 视频还在生成  继续轮训
    timeloading.value = setTimeout(() => {
      LoadingType();
      return;
    }, 5000);
  } else if (res && res.total > 0) {
    videoAllnum.value = res.total;
    istimeloading.value = false;

    if (!flag.value) {
      getAllData()
      videoType();
      flag.value = true
    }

    if (loadingIng.value == true) {
      timeloading.value = setTimeout(() => {
        LoadingType();
      }, 5000);
    }
  }
};

// 计算当前视频项是否全选
const isAllselect = computed(() => {
  return showVideoData.value.every((item) => item.checked);
});

// 计算当前视频项选中的个数
const checked_num = computed(() => {
  return showVideoData.value.filter((item) => item.checked).length;
});

const checkedIds = computed(() => {
  return showVideoData.value
    .filter((item) => item.checked)
    .map((item) => item.id);
});

// 选择文件夹 的保存按钮  在这调生成高质量视频的接口
const saveName = ref({});
// 生成高质量视频
const finshaData = ref({
  id: route.query.qid,
  shotstack_response_num: "",
  shotstack_response_ids: "",
  folder_id: "",
});

// 点击确定
const awaitModel = ref(null);
const saveFn = (options, id) => {
  finshaData.value.folder_id = id;
  finshaData.value.videoMixCut_response_num = saveData.value.checked_num;
  finshaData.value.videoMixCut_response_ids = saveData.value.checkedIds;
  request
    .put("/work_ai", `/user/shotstack/preview/high`, finshaData.value)
    .then((res) => {

      if (res.code == 10011) {
        // 请求失败
        message.warn(res.msg)
      } else {
        // 请求成功!
        awaitModel.value && awaitModel.value.showModal();

      }
    });
  saveVisible.value = false;
};

const videoContentBoxRef = ref(null);
const items = ref([]);
const page = ref(1);

// 监听滚动事件
const handleScroll = () => {
  const container = videoContentBoxRef.value;
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    if (showVideoData.value.length < videoAllnum.value) {
      queryData.value.page++;
      getAllData();
    }
  }
};

// 页面卸载时清理定时器
onUnmounted(() => {
  // window.removeEventListener("scroll", () => { })
  filterArr.value[0].items[0].num = 0;
  filterArr.value[0].items[3].num = 0;
  filterArr.value[0].items[2].num = 0;
  filterArr.value[0].items[1].num = 0;

  if (timerId.value !== null) {
    clearInterval(timerId.value);
  }
  timerId.value = null;

  if (timerIds.value !== null) {
    clearInterval(timerIds.value);
  }
  timerIds.value = null;

  if (timeloading.value !== null) {
    clearTimeout(timeloading.value);
  }
  timeloading.value = null;
});

// 点击返回
const backClick = () => {
  if (loadingIng_spain.value == true) {
    router.push("/workShotstack/creationCenter/MixedCutIntroduction");
  } else {
    router.push(`/mixedCutCreat`);
  }
};

// 退回混剪列表页
const backliebiao = () => {
  router.push("/workShotstack/creationCenter/MixedCutIntroduction");
}

onBeforeRouteLeave((to, from, next) => {

  // 保存之后的跳转, 允许正常跳转
  if (to.name == 'ComposeMaterial' || to.name == 'MixedCutIntroduction') {
    next(true)
    return
  }

  // debugger;
  // 退回的页面必须为mixedCutCreat 并且要有参数, 并且不能有isAi参数
  if (to.name == 'mixedCutCreat' && !!Object.keys(to.query).length && !to.query.isAi) {
    next(true)
    return
  }
  if (route.query.isAi == 'true') {
    router.push(`/mixedCutCreat?id=${route.query.qid}&key=id&viewType=2&openType=edit`);
  } else {
    let baseQuery = `id=${route.query.id}`;
    const dynamicQueryParams = Object.keys(route.query)
      .filter(key => key !== "id" && key !== "qid")
      .map(key => `${key}=${encodeURIComponent(route.query[key])}`);

    if (!dynamicQueryParams.some(param => param.startsWith('key='))) {
      dynamicQueryParams.push(`key=id`);
    }
    const fullQuery =
      dynamicQueryParams.length > 0
        ? `?${baseQuery}&${dynamicQueryParams.join("&")}`
        : `?${baseQuery}`;
    router.push(`/mixedCutCreat${fullQuery}`);
  }
  next(false)
});

// 模拟加载
onMounted(() => {
  LoadingType();
  initData();
});
</script>

<template>
  <a-config-provider prefix-cls="ss">
    <div class="MixedCutPreview">
      <template v-if="isLoding">
        <Loding />
      </template>
      <template v-else>
        <!-- 头部组件 -->
        <navBack @backClick="backClick" :contentConfig="{
          title: '混剪项目2024/3/28',
          isShow: true,
        }" :leftConfig="{
          isShow: true,
        }" :rightConfig="{
          isShow: true,
          content: '',
        }">
          <template #content_text>
            <EditableHead :titleText="titleText" :disabled="true"></EditableHead>
          </template>
          <template #right_btns>
            <a-button type="primary" @click="saveVideo" :disabled="checked_num == 0">
              <div style="border-radius: 8px; overflow: hidden">
                <VideoCameraAddOutlined />
                <span style="margin-left: 7px">生成视频</span>
              </div>
            </a-button>
          </template>
        </navBack>

        <!-- 下方整体 -->
        <div class="content_box">
          <div class="content_box_mind">
            <!-- 筛选框 -->
            <div class="filter_box">
              <div class="filter_item" style="margin-bottom: 16px">
                <span class="filter_title">视频类型</span>
                <div class="select_item_box">
                  <div :class="{
                    active_select: actives[0].activeList.includes(ele.id),
                  }" class="select_item" @click="selectFilter(ele, '视频类型')" v-for="ele in filterArr[0].items"
                    :key="ele.id">
                    {{ ele.name }} ({{ ele.num }})
                  </div>
                </div>
              </div>
              <div class="filter_item">
                <span class="filter_title">视频时长</span>
                <div class="select_item_box">
                  <div class="select_item" :class="{
                    active_select: actives[1].activeList.includes(ele.id),
                  }" @click="selectFilter(ele, '视频时长')" v-for="ele in filterArr[1].items" :key="ele.id">
                    {{ ele.name }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 选择和操作栏 -->
            <div class="selection_and_operation">
              <div class="left_content">
                {{ nowvideo }}
                <span style="margin-left: 10px" v-if="loadingIng">
                  <span v-if="istimeloading" style="display: flex; align-items: center">
                    视频切片中
                    <a-spin :indicator="indicator" style="margin: 5px 0 0 20px" />
                  </span>
                  <span v-else style="display: flex; align-items: center">
                    预计生成视频: {{ videoAllnum }} , 已生成视频: {{ video_isdoning }}
                    <a-spin v-if="loadingIng_spain" :indicator="indicator" style="margin: 5px 0 0 20px" />

                    <span v-if="loadingIng_spain" class="Text_back" @click="backliebiao">后台处理中,您可以返回混剪列表进行其他操作</span>

                    <!-- type="primary" -->
                    <a-button v-if="loadingIng_spain" type="link" class="Text_back_btn"
                      @click="backliebiao">返回</a-button>
                  </span>
                </span>
                <span v-else>当前视频数量 ({{ video_num }})</span>
                <!-- <span v-else>当前视频数量 ({{ showVideoData.length }})</span> 
                -->
                <!-- <a-button type="link">低重复率视频少？点击查看解决方案</a-button>/ -->
              </div>
              <div class="right_content">
                <span>已选择
                  <span class="select_num">{{ checked_num }}</span> 个视频</span>
                <a-button class="right_content_btn" type="primary" @click="handleSelectVideo">定量选择</a-button>
                <a-button class="right_content_btn" type="primary" @click="selectAll">{{ isAllselect ? "取消全选" : "全选"
                  }}</a-button>
              </div>
            </div>
            <!-- 底部视频整体  -->
            <div class="video_content">
              <div class="video_content_box" @scroll="handleScroll" ref="videoContentBoxRef">
                <div v-for="i in showVideoData" :key="i.id" class="video_item video_img_cart"
                  :class="{ active_video_item: i.id == previewItem }" @click="i.checked = !i.checked">
                  <!-- 右上角标签 -->

                  <!-- 中间的预览 -->
                  <div style="height: 100%" class="box">
                    <span class="right_tag">{{ i.category }}</span>
                    <!-- 左上角勾选 -->
                    <a-checkbox @click.stop="i.checked = !i.checked" class="checkbox_item"
                      v-model:checked="i.checked"></a-checkbox>
                    <PlayCircleOutlined class="play_icon" @click.stop="openPreview(i)"></PlayCircleOutlined>

                    <img v-if="i.poster_url" :src="i.poster_url" alt="" style="width: 100%; height: 100%">
                    <!-- <video v-if="i.video_url" style="height: 100%" :src="i.video_url"></video> -->
                    <div v-if="!i.poster_url" class="bg-b">
                      <video v-if="i.resources[0].type == 'video'" style="width: 100%; height: 100%"
                        :src="i.resources[0].material_url"></video>
                      <div v-else class="video_img_cartss"
                        :style="`background-image: url(${i.resources[0].material_url});`">
                      </div>
                    </div>


                  </div>
                  <!-- 底部同组卡片展示 -->
                  <div class="bottom_card_box">
                    <div class="bottom_card_item video_img_cart" v-for="v1 in i.resources" :key="v1.id">
                      <video v-if="v1.type == 'video'" style="width: 36px; height: 100%" :src="v1.material_url"></video>
                      <div v-else class="bottom_card_item video_img_cart"
                        :style="`background-image: url(${v1.material_url});`">
                      </div>
                    </div>
                    <!-- :getPopupContainer="(triggerNode) => {return triggerNode.closest('.bottom_card_box');}" -->
                    <a-popover trigger="click" placement="bottomLeft">
                      <template #content>
                        <div class="insert-card">
                          <div class="horver_box">
                            <div class="horver_item" v-for="v1 in i.resources.slice(5)" :key="v1.id">
                              <video v-if="v1.type == 'video'" style="width: 100%; height: 100%"
                                :src="v1.material_url"></video>
                              <div v-else class="bottom_card_item video_img_cart"
                                :style="`background-image: url(${v1.material_url}); background-repeat: repeat; background-size: 100% 100%;`">
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                      <div @click.stop="() => { }" class="bottom_card_info" v-if="i.resources.length > 5">
                        +{{ i.resources.length - 5 }}
                      </div>
                    </a-popover>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 视频预览 -->
          <transition name="fade">
            <div class="video_preview" v-show="preview">
              <div class="preview_heider">
                <h2>视频预览</h2>
                <span @click="closePreview">收起预览
                  <CaretRightOutlined />
                </span>
              </div>
              <div style="color: red; font-size: 14px;margin-bottom: 5px;">预览播放低像素视频，正式生成会产出高像素视频</div>
              <div id="phoneConCover" class="left_phone_view">
                <a-spin style="width: 100%; height: 640px; z-index: 1000" :spinning="loading">
                  <video style="width: 100%; height: 100%" controls autoplay :src="showVideo_R" preload="auto"></video>

                  <!-- <video style="width: 100%; height: 100%" controls autoplay preload="auto">
                    <source :src="showVideo_R" type="video/mp4" @error="handleVideoError" />
                    <source :src="showVideo_R" type="video/quicktime" />
                    <source :src="showVideo_R" type="video/mpeg" />
                    <source :src="showVideo_R" type="video/3gpp" />
                  </video> -->

                  <DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
                    <Vue3DraggableResizable v-show="item.copywriting" v-for="(item, index) in coverList"
                      :key="'art_con' + index" :initW="coverList[index].width" :initH="coverList[index].height"
                      v-model:x="coverList[index].elLeft" v-model:y="coverList[index].elTop"
                      v-model:w="coverList[index].width" v-model:h="coverList[index].height"
                      v-model:active="coverList[index].active" :draggable="true" :resizable="true" :parent="true">
                      <div @click.stop="getPosition(index)" :style="coverStyle(item, index)">
                        {{ item.copywriting }}
                      </div>
                    </Vue3DraggableResizable>
                  </DraggableContainer>
                </a-spin>
              </div>
            </div>
          </transition>
        </div>
      </template>
      <!-- 定量选择 弹窗 -->
      <QuantitativeChoice ref="dialog" @handleOk="handleOk" :max="maxlength"></QuantitativeChoice>
      <!-- 保存视频弹窗 -->
      <awaitDialog ref="awaitModel"></awaitDialog>

      <!-- 视频预加载 -->
      <video ref="videoElement" style="display: none;" muted controls autoplay preload="auto"
        :src="currentVideoUrl"></video>
      <!-- 保存到文件夹弹窗@selfSubmit="saveVideoData"  -->
      <MaterialsModule ref="materials" jobCategory="videoSplit" :aisave="true" :requestType="true"
        :material_type="'video'" :isFlaking="true" @saveName="saveFn" @selfRequest="saveVideoData"
        :visible="saveVisible" :data="currentSaveData" @onCancel="saveVisible = false" />
    </div>
  </a-config-provider>
  <!-- 生成批量预览等待弹窗 -->
  <!-- <a-modal :footer="null" :maskClosable="false" :closable="false" class="tipModal"
    style="border-radius: 10px;overflow: hidden;" width="340px" centered v-model:visible="state.visibleTipModal"
    @ok="handleOk">
    <p style="margin-top: 10px;font-size: 14px;color: red;">预览视频正在处理中，请耐心等待，也可以返回混剪首页进行其他操作，后台将继续为您处理预览任务</p>
    <span style="display: flex; align-items: center;justify-content: center;">
      <a-spin :indicator="indicator" style="margin-right: 10px;display: flex;align-items: center;" />
      <span style="font-size: 16px;font-weight: 600;">预览处理中...</span>
    </span>
    <div style="display: flex;justify-content: space-between;">
      <a-button type="link" @click="state.visibleTipModal = false">继续等待</a-button>
      <a-button type="link" @click="backliebiao">返回列表</a-button>
    </div>
  </a-modal> -->
</template>

<style lang="less" scoped>
// 给预览的元素显示和隐藏添加过渡效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

// 手机样式
.left_phone_view {
  width: 360px;
  height: 760px;
  // flex: 1;
  background-color: #000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
}

.MixedCutPreview {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content_box {
    flex: 1;
    display: flex;
    overflow: hidden;

    // 视频图片卡片公用样式
    .video_img_cart {
      transition: all 0.2s ease 0s;
      border-radius: inherit;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    // 视频预览
    .video_preview {
      padding: 26px 50px;
      display: flex;
      flex-direction: column;
      background: #f6f7fb;

      .preview_heider {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;

        h2 {
          color: #1c1f23;
          font-size: 16px;
          font-weight: 600;
          margin: 0;
        }

        span {
          font-size: 14px;
          color: #1c1f2399;
          cursor: pointer;
        }
      }

      .left_phone_view {
        // flex: 1;
        height: 750px;
      }
    }

    .content_box_mind {
      flex: 1;
      min-width: 740px;
      padding: 32px;
      display: flex;
      flex-direction: column;

      // 视频预览列表
      .video_content {
        display: flex;
        overflow: hidden;

        .video_content_box {
          overflow-y: auto;
          // width: 100%;
          width: 1850px;
          // width: 1650px;
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(155px, 155.13px));
          grid-auto-rows: 280px;
          grid-gap: 25px;
          padding: 10px;
          padding-right: 10px;
          position: relative;

          &::-webkit-scrollbar {
            cursor: pointer;
            width: 8px;
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          .video_item {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #ffffff;
            border-radius: 3px;

            .box {
              // position: relative;

              &:hover {
                & .play_icon {
                  opacity: 1;
                  z-index: 99;
                }
              }

              // 播放按钮
              .play_icon {
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: var(--ss-tag-bgc-color);
                transition: all 0.4s;
                opacity: 0;
                z-index: -99;

                &:hover {
                  color: var(--ss-primary-color);
                }
              }
            }

            // max-width: 220px;

            .bottom_card_box {
              position: absolute;
              bottom: 0;
              left: 0;
              height: 20%;
              width: 100%;
              background: rgba(2, 8, 20, 0.8);
              display: flex;
              padding: 3px;
              align-items: center;
              // flex-wrap: nowrap;
              justify-content: flex-start;
              gap: 3px;
              overflow: hidden;
              z-index: 10;
              // overflow-x: auto;
              // padding-bottom: 4px;

              // &::-webkit-scrollbar {
              //     cursor: pointer;
              //     height: 4px;
              //     /* 滚动条的高度，垂直滚动条可能用得上 */
              // }

              // &::-webkit-scrollbar-thumb {
              //     cursor: grab;
              //     background: #888;
              //     /* 滑块的背景颜色 */
              //     border-radius: 10px;
              //     /* 滑块的圆角 */

              // }

              .bottom_card_item {
                flex-shrink: 0;
                width: 36px;
                height: 100%;
              }
            }

            .bottom_card_info {
              position: absolute;
              color: #fff;
              bottom: 4px;
              right: 1px;
              width: 37px;
              height: 49px;
              line-height: 49px;
              text-align: center;
            }

            // 左上角勾选
            .checkbox_item {
              position: absolute;
              left: 5px;
              top: 5px;
            }

            // 右上角标签
            .right_tag {
              width: 70px;
              background-color: #87d068;
              border-radius: 3px;
              color: #fff;
              font-size: 10px;
              position: absolute;
              right: 5px;
              top: 7px;
              line-height: 19px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0;
            }
          }

          .active_video_item {
            border-color: #7af3ff;

            & .play_icon {
              opacity: 1;
              z-index: 99;
              color: #7af3ff;
            }
          }
        }
      }

      // 选择框
      .selection_and_operation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(28, 31, 35, 0.08);

        .left_content {
          display: flex;
          align-items: center;
        }

        .right_content {
          display: flex;
          align-items: center;
          gap: 10px;

          .select_num {
            color: #1759dd;
          }

          .right_content_btn {
            border-radius: 4px;
            overflow: hidden;
          }
        }
      }

      // 筛选框
      .filter_box {
        .filter_item {
          display: flex;
          align-items: center;

          .filter_title {
            padding: 3px 5px;
            width: 90px;
            font-size: 14px;
            color: #1c1f2399;
          }

          .select_item_box {
            display: flex;
            align-items: center;

            .select_item {
              cursor: pointer;
              margin-right: 10px;
              padding: 8px 14px;
              font-size: 14px;
              color: #1c1f2399;

              &:hover {
                background-color: var(--ss-tag-bgc-color);
              }
            }

            // 高亮选中
            .active_select {
              background-color: var(--ss-tag-bgc-color);
              // color: #1c1f23;
              color: var(--ss-primary-color);
              font-weight: 600;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }
}

.horver_box {
  display: flex;
  width: 325px;
  flex-wrap: wrap;

  .horver_item {
    width: 60px;
    height: 100px;
    margin-right: 5px;
    background-color: #000;
    display: flex;
    justify-content: center;
  }
}

.ant-popover-inner {
  background-color: #999 !important;
}


.Text_back {
  color: red;
  margin-left: 10px;
  cursor: pointer;

}

.Text_back_btn {
  margin-left: 5px;
  border-radius: 5px;
  font-size: 14px;
  ;
  line-height: 14px;
  ;
}


.video_img_cartss {
  transition: all 0.2s ease 0s;
  border-radius: inherit;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.bg-b {
  background-color: #000;
  width: 100%;
  height: 100%;
}
</style>
